﻿@model Eyskens.AutoTaggerWeb.Models.AlchemyEntitiesResponseModel

@{
    ViewBag.Title = "Alchemy Analysis";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link type="text/css" rel="stylesheet" href="~/Content/style.min.css" />
<div style="margin-top:65px"><h3>Analysis with Alchemy</h3></div>
<div style="height:500px;overflow-y:scroll;">

    @if (Model.ProcessStatus != null)
    {
        <div style="color:red;">@Model.ProcessStatus</div>
    }
    else
    {
        if (Model.entities.Entities != null && Model.entities.Entities.Count > 0)
        {
            <h3>Entities</h3>
            <table>
                <tr>
                    <td style="width:300px;vertical-align:top;">
                        <div id="entities">
                            @foreach (var type in Model.entities.Entities.Select(e => e.Type).Distinct())
                            {

                                <ul>
                                    <li data-jstree='{"type":0, "opened" : false, "icon" : "/Content/Images/squares36.png" }'>
                                        @type
                                        <ul>

                                            @foreach (var entity in Model.entities.Entities.Where(et => et.Type.Equals(type)))
                                            {
                                                if (entity.Disambiguated != null)
                                                {
                                                    <li data-jstree='{"dbpedia":"@if (entity.Disambiguated.Dbpedia != null){@(entity.Disambiguated.Dbpedia.AbsoluteUri)}","freebase":"@if (entity.Disambiguated.Freebase != null){@(entity.Disambiguated.Freebase.AbsoluteUri)}","yago":"@if (entity.Disambiguated.Yago != null){@(entity.Disambiguated.Yago.AbsoluteUri)}","ciaFactbook":"@if (entity.Disambiguated.CiaFactbook != null){@(entity.Disambiguated.CiaFactbook.AbsoluteUri)}","opencyc":"@if (entity.Disambiguated.Opencyc != null){@(entity.Disambiguated.Opencyc.AbsoluteUri)}","geo":"@if (entity.Disambiguated.Geo != null){@(entity.Disambiguated.Geo.OriginalString)}","type":1, "relevance":"@entity.Relevance","icon" : "/Content/Images/tagdis.png" }'>@entity.Text</li>
                                                }
                                                else
                                                {
                                                    <li data-jstree='{"dbpedia":"","type":1, "relevance":"@entity.Relevance", "icon" : "/Content/Images/taggreensmall.png" }'>@entity.Text</li>
                                                }
                                            }
                                        </ul>
                                    </li>
                                </ul>

                            }
                        </div>
                    </td>
                    <td style="vertical-align:top;padding-left:100px;border-left:solid;">
                        <table>
                            <tr><td><h4 style="margin-top:-30px;">Entity details</h4></td></tr>
                            <tr><td id="EntityDetails">Please click an entity node</td></tr>
                            <tr>
                                <td style="padding-top:15px;">
                                    <button onclick="CreateKeyword('#EntityWorkingArea');" id="AddEntityBtn" type="button" class="btn btn-primary" disabled="disabled">Make it a SharePoint keyword</button>
                                    <button onclick="TagKeyword('#EntityWorkingArea');" id="TagEntityBtn" type="button" class="btn btn-primary" disabled="disabled">Tag document with keyword</button>
                                </td>
                            </tr>
                            <tr><td id="EntityWorkingArea"></td></tr>
                        </table>
                    </td>

                </tr>
            </table>

        }

        if (Model.concepts.Concepts != null && Model.concepts.Concepts.Count > 0)
        {
            <h3>Concepts</h3>
            <table>
                <tr>
                    <td style="width:300px;vertical-align:top;">
                        <div id="concepts">
                            <ul>
                                <li data-jstree='{"type":0, "opened" : false, "icon" : "/Content/Images/squares36.png" }'>
                                    Concepts
                                    <ul>
                                        @foreach (var concept in Model.concepts.Concepts)
                                        {
                                            <li data-jstree='{"dbpedia":"@if (concept.Dbpedia != null)
                                                                                 {@(concept.Dbpedia.AbsoluteUri)}","freebase":"@if (concept.Freebase != null)
                                                                                                                                            {@(concept.Freebase.AbsoluteUri)}","yago":"@if (concept.Yago != null)
                                                                                                                                                                                                    {@(concept.Yago.AbsoluteUri)}","ciaFactbook":"@if (concept.CiaFactbook != null)
                                                                                                                                                                                                                                                               {@(concept.CiaFactbook.AbsoluteUri)}","opencyc":"@if (concept.Opencyc != null)
                                                                                                                                                                                                                                                                                                                             {@(concept.Opencyc.AbsoluteUri)}","geo":"@if (concept.Geo != null)
                                                                                                                                                                                                                                                                                                                                                                                   {@(concept.Geo.OriginalString)}","type":1, "relevance":"@concept.Relevance","icon" : "/Content/Images/taggreensmall.png" }'>@concept.Text</li>

                                        }
                                    </ul>
                            </ul>

                            }
                        </div>
                    </td>

                    <td style="vertical-align:top;padding-left:100px;border-left:solid;">
                        <table>
                            <tr><td><h4 style="margin-top:-30px;">Concept details</h4></td></tr>
                            <tr><td id="ConceptDetails">Please click a concept node</td></tr>
                            <tr>
                                <td style="padding-top:15px;">
                                    <button onclick="CreateKeyword('#ConceptWorkingArea');" id="AddConceptBtn" type="button" class="btn btn-primary" disabled="disabled">Make it a SharePoint keyword</button>
                                    <button onclick="TagKeyword('#ConceptWorkingArea');" id="TagConceptBtn" type="button" class="btn btn-primary" disabled="disabled">Tag document with keyword</button>
                                </td>
                            </tr>
                            <tr><td id="ConceptWorkingArea"></td></tr>
                        </table>
                    </td>
                </tr>
            </table>

        }

        if (Model.keywords != null && Model.keywords.Count() > 0)
        {
            <h3>Keywords</h3>
            <table>
                <tr>
                    <td style="width:300px;vertical-align:top;">
                        <div id="keywords">
                            <ul>
                                <li data-jstree='{"type":0, "opened" : false, "icon" : "/Content/Images/squares36.png" }'>
                                    Keywords
                                    <ul>
                                        @foreach (var keyword in Model.keywords)
                                        {
                                            <li data-jstree='{"type":1,"icon" : "/Content/Images/taggreensmall.png","graph":"@if (keyword.KnowledgeGraph != null){@(keyword.KnowledgeGraph.TypeHierarchy.Replace(keyword.Text,""))}" }'>@keyword.Text</li>
                                        }
                                    </ul>
                            </ul>
                        </div>
                    </td>

                    <td style="vertical-align:top;padding-left:100px;border-left:solid;">

                        <table>
                            <tr><td><h4 style="margin-top:-30px;">Keyword details</h4></td></tr>
                            <tr><td id="KeywordDetails">Please click a keyword node</td></tr>
                            <tr>
                                <td style="padding-top:15px;">
                                    <button id="AddKeywordBtn" onclick="CreateKeyword('#KeywordWorkingArea');" type="button" class="btn btn-primary" disabled="disabled">Make it a SharePoint keyword</button>
                                    <button onclick="TagKeyword('#KeywordWorkingArea');" id="TagKeywordBtn" type="button" class="btn btn-primary" disabled="disabled">Tag document with keyword</button>
                                </td>
                            <tr><td id="KeywordWorkingArea"></td></tr>
                        </table>
                    </td>
                </tr>
            </table>
        }

        if (Model.sentiment.DocSentiment != null)
        {
            <h3>Sentiment : @Model.sentiment.DocSentiment.Type.ToString()</h3>
        }
        <h3>Top 10 of most used words</h3>
        <table>
            <tr>
                <td>
                    <div id="TokenChart" style="width: 900px; height: 500px;"></div>
                </td>
            </tr>
        </table>
    }

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="~/Scripts/jstree.min.js"></script>
<script type="text/javascript">
    var CurrentKeyword = null;
    var SPHostUrl = decodeURIComponent(getQueryStringParameter("SPHostUrl"));
    var SPAppWebUrl = decodeURIComponent(getQueryStringParameter("SPAppWebUrl"));
    var SPListItemId = decodeURIComponent(getQueryStringParameter("SPListItemId"));
    var SPListId = decodeURIComponent(getQueryStringParameter("SPListId"));
    var SPLanguage = decodeURIComponent(getQueryStringParameter("SPLanguage"));
    var SPClientTag = decodeURIComponent(getQueryStringParameter("SPClientTag"));
    var SPProductNumber = decodeURIComponent(getQueryStringParameter("SPProductNumber"));
    function CreateKeyword(target) {
        $(target).empty().append("Working on it...");
        $.ajax({
            url: '/keyword/create?SPHostUrl=' + SPHostUrl + '&SPLanguage=' + SPLanguage + '&SPClientTag=' + SPClientTag + '&SPProductNumber=' + SPProductNumber + '&SPAppWebUrl=' + SPAppWebUrl,
            type: 'POST',
            data: 'k=' + CurrentKeyword
        }).done(function () {
            $(target).empty().append("Keyword created...");
        }).fail(function () {
            $(target).empty().append("An error occured...");
        });

    }
    function TagKeyword(target) {
        $(target).empty().append("Working on it...");
        $.ajax({
            url: '/keyword/tag?SPHostUrl=' + SPHostUrl + '&SPLanguage=' + SPLanguage + '&SPClientTag=' + SPClientTag + '&SPProductNumber=' + SPProductNumber + '&SPAppWebUrl=' + SPAppWebUrl + '&SPListItemId=' + SPListItemId + '&SPListId=' + SPListId,
            type: 'POST',
            data: 'k=' + CurrentKeyword
        }).done(function () {
            $(target).empty().append("Document tagged...");
        }).fail(function () {
            $(target).empty().append("An error occured...");
        });
    }
    $('#entities').jstree();
    $('#entities').on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            $('#EntityWorkingArea').empty();
            var dataNode = data.instance.get_node(data.selected[0]).data.jstree;
            if (dataNode.type == 1) {
                CurrentKeyword = data.instance.get_node(data.selected[0]).text;
                $('#AddEntityBtn').prop('disabled', false);
                $('#TagEntityBtn').prop('disabled', false);
                $("#EntityDetails").empty().append("<table><tr><td>Relevance</td><td>" + dataNode.relevance + "</td></tr>" +
                    "<tr><td>DBPedia</td><td>" + ((dataNode.dbpedia != '' && dataNode.dbpedia != undefined) ? "<a href='" + dataNode.dbpedia + "'>" + dataNode.dbpedia + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Freebase</td><td>" + ((dataNode.freebase != '' && dataNode.freebase != undefined) ? "<a href='" + dataNode.freebase + "'>" + dataNode.freebase + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Yago</td><td>" + ((dataNode.yago != '' && dataNode.yago != undefined) ? "<a href='" + dataNode.yago + "'>" + dataNode.yago + "</a>" : "") + "</td></tr>" +
                    "<tr><td>CiaFactbook</td><td>" + ((dataNode.ciaFactbook != '' && dataNode.ciaFactbook != undefined) ? "<a href='" + dataNode.ciaFactbook + "'>" + dataNode.ciaFactbook + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Opencyc</td><td>" + ((dataNode.opencyc != '' && dataNode.opencyc != undefined) ? "<a href='" + dataNode.opencyc + "'>" + dataNode.opencyc + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Geo</td><td>" + ((dataNode.geo != '' && data.geo != undefined) ? dataNode.geo : "") + "</td></tr>" +
                    "</table>")


            }

        }
    })

    $('#concepts').jstree();
    $('#concepts').on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            $('#ConceptWorkingArea').empty();
            var dataNode = data.instance.get_node(data.selected[0]).data.jstree;
            if (dataNode.type == 1) {
                CurrentKeyword = data.instance.get_node(data.selected[0]).text;
                $('#AddConceptBtn').prop('disabled', false);
                $('#TagConceptBtn').prop('disabled', false);

                $("#ConceptDetails").empty().append("<table><tr><td>Relevance</td><td>" + dataNode.relevance + "</td></tr>" +
                    "<tr><td>DBPedia</td><td>" + ((dataNode.dbpedia != '' && dataNode.dbpedia != undefined) ? "<a href='" + dataNode.dbpedia + "'>" + dataNode.dbpedia + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Freebase</td><td>" + ((dataNode.freebase != '' && dataNode.freebase != undefined) ? "<a href='" + dataNode.freebase + "'>" + dataNode.freebase + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Yago</td><td>" + ((dataNode.yago != '' && dataNode.yago != undefined) ? "<a href='" + dataNode.yago + "'>" + dataNode.yago + "</a>" : "") + "</td></tr>" +
                    "<tr><td>CiaFactbook</td><td>" + ((dataNode.ciaFactbook != '' && dataNode.ciaFactbook != undefined) ? "<a href='" + dataNode.ciaFactbook + "'>" + dataNode.ciaFactbook + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Opencyc</td><td>" + ((dataNode.opencyc != '' && dataNode.opencyc != undefined) ? "<a href='" + dataNode.opencyc + "'>" + dataNode.opencyc + "</a>" : "") + "</td></tr>" +
                    "<tr><td>Geo</td><td>" + ((dataNode.geo != '' && data.geo != undefined) ? dataNode.geo : "") + "</td></tr>" +
                    "</table>")

            }

        }
    })
    $('#keywords').jstree();
    $('#keywords').on("changed.jstree", function (e, data) {
        if (data.selected.length) {
            $('#KeywordWorkingArea').empty();
            var dataNode = data.instance.get_node(data.selected[0]).data.jstree;
            if (dataNode.type == 1) {
                CurrentKeyword = data.instance.get_node(data.selected[0]).text;
                $('#AddKeywordBtn').prop('disabled', false);
                $('#TagKeywordBtn').prop('disabled', false);
                $("#KeywordDetails").empty().append("<table><tr><td>Knowledge Graph</td><td>" + ((dataNode.graph != '' && dataNode.graph != undefined) ? dataNode.graph : "") + "</td></tr>" + "</table>")
            }

        }
    })
</script>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(BuildTokenChart);
    function BuildTokenChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn("string", "Word");
        dataTable.addColumn("number", "1");
        dataTable.addColumn("number", "2");
        dataTable.addColumn("number", "Count");
        @foreach (var token in Model.tokens)
        {
            <text>
        dataTable.addRow(["@token.word",@token.count,@token.count,@token.count]);
        </text>

        }
        var options = {

            bubble: { textStyle: { fontSize: 11 } }

        };

        var chart = new google.visualization.BubbleChart(document.getElementById('TokenChart'));
        chart.draw(dataTable, options);
    }
</script>